<template>
  <div class="table">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 基础表格
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        stripe
      >
        <el-table-column type="selection" width="55"></el-table-column>
         <el-table-column prop="indexs" label="商户号?商户简称/商户号" width="120"  :render-header="renderheader">
             <template slot-scope="scope">
                 <div>{{ scope.row.date }}</div>
                 <div>{{ scope.row.indexs }}</div>
             </template>
         </el-table-column>
        <el-table-column label="所在省?所在市" width="120" :render-header="renderheader">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column prop="name" label="业务经理?服务商" width="120" :render-header="renderheader"></el-table-column>
        <el-table-column prop="address" label="使用通道?费率(万分比)" :render-header="renderheader"></el-table-column>
        <el-table-column prop="address" label="所属行业"></el-table-column>
        <el-table-column prop="address" label="创建时间"></el-table-column>
        <el-table-column prop="address" label="商户状态"></el-table-column>
        <el-table-column  label="操作"></el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
        @current-change="handleCurrentChange"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400">
        </el-pagination>
      </div>
    </div>

  
  </div>
</template>

<script>
export default {
  name: "basetable",
  data() {
    return {
      url: "./vuetable.json",
      tableData: [],
      cur_page: 1,
      multipleSelection: [],
    };
  },
  created() {
    this.getData();
  },
  computed: {
  },
  methods: {
    renderheader(h, { column, $index }) {
        return h('span', {}, [
            h('span', {}, column.label.split('?')[0]),
            h('br'),
            h('span', {}, column.label.split('?')[1])
        ])
    },
    // 分页导航
    handleCurrentChange(val) {
      this.cur_page = val;
      this.getData();
    },
    getData() {
      this.url = "../../vuetable.json";
      this.$axios
        .get(this.url, {
          page: this.cur_page
        })
        .then(res => {
          this.tableData = res.data.list;
          console.log(res.data.list)
        });
    },
 
 
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  
  }
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.del-dialog-cnt {
  font-size: 16px;
  text-align: center;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
</style>
